<template>
	<view class="all">
		<!-- 个人信息start -->
		<view class="Info">
			<view v-if="!shop.shopName" class="top" style="font-size: 30rpx; font-weight: bold; margin-left: 30rpx; color: white;" @click="navCreateShop">
				请创建企业
			</view>	
			<view class="top" v-else>
				<view class="left">
					<image :src="baseHttp+shop.shopImg" style="margin-left: 10rpx; height: 110rpx;width: 110rpx;border-radius:20rpx;">
					</image>
					<view class="info">
						<text class="title">{{shop.shopName}}</text>
						<text class="info-id">xxx{{shop.id}}x12{{shop.id}}</text>
					</view>
				</view>
				<view class="right">
					<view class="Btn" @click="ziliao">
						修改资料
					</view>
					<view class="text">
						当前余额: <text style="color: red;">{{shop.integral == undefined? '':shop.integral}}</text>
					</view>
				</view>
			</view> 
		</view>
		
		<!-- 个人信息end -->			
		<view class="footer">
			<view class="item">
				<view class="image">
					<image src="../../static/icon/进入店铺.png"></image>
				</view>
				<view class="text" @click="navIPXingxiang(1)">
					<view class="title">账号打标签</view>
				</view>
			</view>
			<view class="item" @click="navDarenkoubo(2)">
				<view class="image">
					<image src="../../static/icon/摄影机.png"></image>
				</view>
				<view class="text">
					<view class="title">人设破流量</view>					
				</view>
			</view>
			<view class="item" @click="navWanghongmendian(3)">
				<view class="image">
					<image src="../../static/icon/定位.png"></image>
				</view>
				<view class="text">
					<view class="title">企业硬广告</view>
				</view>
			</view>
			<view class="item" @click="qiyebaokuan(4)">
				<view class="image">
					<image src="../../static/icon/VIP (1).png"></image>
				</view>
				<view class="text">
					<view class="title">企业做爆款</view>
				</view>
			</view>
			<view class="item" @click="navYijianchengpian(5)">
				<view class="image">
					<image src="../../static/icon/进入店铺.png"></image>
				</view>
				<view class="text">
					<view class="title">数字人视频</view>
				</view>
			</view>
			<view class="item" @click="navGIF(6)">
				<view class="image">
					<image src="../../static/icon/引流.png"></image>
				</view>
				<view class="text">
					<view class="title">模板做爆款</view>
				</view>
			</view>
		</view>
		
		<!-- 成片中心start -->
		<view class="Pcenter" @click="navJianjiku">
			当前已累计打造{{videoNum}}条视频
		</view>		
		<!-- 成片中心end -->
		
		<!-- 其他功能start -->
			<view class="qita">
				<view class="List">
					<view class="item" @click="navShouquan">
						<image src="../../static/icon/进入店铺.png"></image>
						<view style="font-size: 20rpx;">子账号授权</view>
					</view>
				</view>
			</view>
		<!-- 其他功能end -->
		
		<!-- <view style="width: 100%;height: 100rpx;background:red;color: #fff;" @click="navSecondType">素材库</view> -->
		
		<!-- 弹窗start -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="rgb(238, 234, 249)" class="popup-content">
				<view style="height: 800rpx;border-top-left-radius: 20rpx; overflow: auto;">
					<view class="popup-header">
						<view class="title">
							我的商家（{{person.length}}家）
						</view>
						<view class="close" @click="closepopup()">
							x
						</view>
					</view>
					<view class="shangjia" v-for="(item,index) in person" :key="index">
						<view class="left">
							<image :src="baseHttp+item.shopImg" style="height: 70rpx;width:70rpx;"></image>
						   <view class="left-right">
						   	  <view style="display: flex;">
						   	  	<view class="qiye">{{item.shopName}}</view>
								<view class="shouquan">
									{{item.type == 1 ? '自建':'授权'}}
								</view>
						   	  </view>
							  <view class="create-time">
							  	创建于{{item.createTime}}
							  </view>
							  <view class="classify">
							  	剪辑+直播
							  </view>
						   </view>
						</view>
					
					    <view class="right" @click="bk(item)">
					    	打造爆款
					    </view>
					</view>
					
					<view style="display: flex; justify-content: center;font-size: 30rpx;color: #666;">
						没有更多数据了
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 弹窗end -->
		
	</view>
</template>

<script>
	import Http from '../../utils/http';
	const app = getApp()
	const http = new Http();
	export default {
		data() {
			return {
				title:'AI视频',
				person:[],
				baseHttp:'',
				shop:{},
				videoList:[],
				shopId:'',
				videoNum:0
			}
		},
		onLoad() {
			this.shopId = app.globalData.shopId;
			this.tradeId = app.globalData.tradeId;
			console.log(this.shopId);
		},
		mounted() {
			this.baseHttp = app.globalData.baseHttp; // 输出 '我是全局变量'
		},
		onShow() {
			this.getShopIfo()
			this.getJobNum()
			this.getInfo();
		},
		methods: {
			navSecondType(){
				
				uni.navigateTo({
					url:"/subpkg/videoLibrary/secondType"
				})
			},
			//获取剪辑库数量
			getJobNum(){
				http.get("v1/jiaoben/getJobNum").then(res=>{
					this.videoNum =  res.data.data
				})
			},
			//获取店铺信息
			getShopIfo(){
				uni.showLoading({
					title:"加载中...."
				})
				http.get("v1/system/createShop/getShopInfo").then(res=>{
					uni.hideLoading()
					if(res.data.code==200){
						if(res.data.msg==""){
							uni.navigateTo({
								url:"/subpkg/createShop/createShop"
							})
						}
						this.shop = res.data.data;
						this.shopId = this.shop.id;
						app.globalData.tradeId = this.res.data.data.tradeId;
					}
				})
			},
			//导航到店铺
			navCreateShop(){
				uni.navigateTo({
					url:"/subpkg/mkvideo/myJianjiKu"
				})
			},
			//店铺授权
			navShouquan(){
				uni.showToast({
					title:"暂未开放",
					icon:"error"
				})
			},
			//资料修改
			ziliao(){
				uni.navigateTo({
					url:'/subpkg/createShop/createShop'
				})
			},
			//获取用户信息
			getInfo(){
				this.shopId = app.globalData.shopId;
				if(this.shopId != null){
					http.get('v1/system/createShop/'+this.shopId).then(res=>{
						this.shop = res.data.data;
					})
				}
			},
			//获取剪辑库的数量
			bk(item){
				app.globalData.shopId = item.id;
				this.getInfo();
				this.sendRequire();
				this.$refs.popup.close('bottom');
			},
			closepopup(){
				this.$refs.popup.close('bottom');
			},
			sendRequire(){
				this.shopId = app.globalData.shopId;
				let obj = {
					shopId:this.shopId
				}
				http.post('v1/jiaoben/Joblist',obj).then(res=>{
					this.videoList = res.data.data;
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type);
				http.get('v1/system/createShop/getInfo/'+1).then(res=>{
					this.person = res.data.data;
				})
			},
			
			navJianjiku(){
				if(this.shopId == null){
					uni.navigateTo({
						url:"/subpkg/createShop/createShop"
					})
					uni.showToast({
						title:'您还未有店铺,请创建!',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:"/subpkg/mkvideo/darenkoubo"
					})					
				}
			},
			//GIF引流
			navGIF(){
				if(this.shopId == null){
					uni.navigateTo({
						url:"/subpkg/createShop/createShop"
					})
					uni.showToast({
						title:'您还未有店铺,请创建!',
						icon:'none'
					})
				}else{
					uni.showToast({
						title:"功能暂未开发",
						icon:'error'
					})		
				}
			},
			//一键成片
			navYijianchengpian(num){
				if(this.shopId == null){
					uni.navigateTo({
						url:"/subpkg/createShop/createShop"
					})
					uni.showToast({
						title:'您还未有店铺,请创建!',
						icon:'none'
					})
				}else{
					uni.showToast({
						title:"功能暂未开发",
						icon:'error'
					})		
				}
			},
			navIPXingxiang(num){
				if(this.shopId == null){
					uni.navigateTo({
						url:"/subpkg/createShop/createShop"
					})
					uni.showToast({
						title:'您还未有店铺,请创建!',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:"/subpkg/mkvideo/IPxingxiangdazao?id="+num
					})			
				}
			},
			navDarenkoubo(num){
				if(this.shopId == null){
					uni.navigateTo({
						url:"/subpkg/createShop/createShop"
					})
					uni.showToast({
						title:'您还未有店铺,请创建!',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:"/subpkg/mkvideo/IPxingxiangdazao?id="+num
					})			
				}
				
			},
			navWanghongmendian(num){
				if(this.shopId == null){
					uni.navigateTo({
						url:"/subpkg/createShop/createShop"
					})
					uni.showToast({
						title:'您还未有店铺,请创建!',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:"/subpkg/mkvideo/IPxingxiangdazao?id="+num
					})			
				}
			},
			qiyebaokuan(num){
				if(this.shopId == null){
					uni.navigateTo({
						url:"/subpkg/createShop/createShop"
					})
					uni.showToast({
						title:'您还未有店铺,请创建!',
						icon:'none'
					})
				}else{
					uni.showToast({
						title:"功能暂未开发",
						icon:'error'
					})			
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all{
		min-height: 100vh;
		width: 100vw;
		height: 100%;
		background-size: cover;
		padding-top: 255rpx;
		background-image: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/20/1710927317306411a0e8ed29b46409a035cc595ec2d36.png');
		background-repeat: no-repeat;
		.Info{
			height: 150rpx;
			margin-bottom: 100rpx;
		}
		.top{
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background-color: rgb(238, 234, 249);
			.left{
				height: 120rpx;
				width: 320rpx;
				background-color: white;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
			    margin-left: 30rpx;
				.info{
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					
					.title{
						font-size: 36rpx;
						font-weight: bold;
					}
					.info-id{
						margin-top: 10rpx;
						font-size: 30rpx;
					}
				}
			}
			.right{
				height: 100%;
				width: 350rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				margin-right: 20rpx;
				justify-content: space-around;
				padding-right: 10rpx;
				.Btn{
					background-color: red;
					height: 50rpx;
					width: 150rpx;
					text-align: center;
					line-height: 50rpx;
					color: white;
					background-color: rgb(63, 154, 185);
					border-radius: 10rpx;
				}
				.text{
					font-size: 35rpx;
					color: white;
					font-weight: bold;
				}
			}
		}
		.footer{
			width: 100%;
			// background-color: rgb(238, 234, 249);
			display: flex;
			flex-wrap: wrap;
			margin: 0rpx 0rpx 10rpx 0rpx;
			box-sizing: border-box;
			justify-content: space-around;
			padding: 10rpx 25rpx;
			.item{
				width: 45%;
				height: 140rpx;
				background-color: white;
				margin: 10rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				padding: 10rpx;
				.image{
					width: 70rpx;
					height: 70rpx;
					background-color: rgb(236, 239, 255);
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						
					}
				}
				.text {
				  height: 100%;
				  display: flex;
				  flex-direction: column;
				  margin-left: 10rpx;
				  justify-content: space-around;
				  .title{
					  font-weight: bold;
					  font-size: 32rpx;
				  }
				  .sub-title{
					  font-size: 24rpx;
				  }
				}
			}
		}
		.Pcenter{
			margin-top: 80rpx;
			height: 270rpx;
			display: flex;
			font-weight: bold;
			align-items: center;
			color: rgb(246, 248, 140);
			justify-content: center;
			margin-bottom: 120rpx;
		}
		.qita{
			height: 300rpx;
			width: 95%;
			margin: 20rpx auto;
			border-radius: 10rpx;
			padding: 5rpx;
			.List{
				height: 200rpx;
				width: 100%;
				display: flex;
				align-items: center;
				.item{
					padding: 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{
						height: 100rpx;
						width: 100rpx;
					}
				}
			}
		}
		
		
		.popup-content{
				width: 100vw;
				.info{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.PersonInfo{
						display: flex;
						image{
							height: 100rpx;
							width: 100rpx;
							margin: 10rpx;
						}
					}
				}
			}
			.popup-header{
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				.title{
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			.shangjia{
				margin: 10rpx 30rpx 30rpx;
				padding: 20rpx;
				background: #fff;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					.left-right{
						margin-left: 20rpx;
						.qiye{
							font-size: 34rpx;font-weight: bold;
						}
						.shouquan{
							font-size: 24rpx;
							color: aquamarine;
							border: 1rpx solid aquamarine;
							height: 30rpx;
							line-height: 30rpx;
							width: 70rpx;
							margin-left: 10rpx;
							text-align: center;
							border-radius: 6rpx;
						}
						.create-time{
							font-size: 24rpx;
							color: #666;
						}
						.classify{
							font-size: 24rpx;
							color: #666;
						}
					}
				}
				.right{
					width: 150rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: orange;
					color: #fff;
					text-align: center;
					font-size: 30rpx;
					border-radius: 12rpx;
				}
			}
			.close{
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #807e81;
				color: #fff;
				border-radius: 25rpx;
			}
		}
</style>